<!--
 * @Author: 凌宇king
 * @Date: 2022-09-24 08:35:47
 * @LastEditTime: 2022-09-25 07:59:19
-->
<template>
    <div class="container login">
        <div class="body">
            <h1>Login</h1>
            <el-form ref="form" :model="form" label-width="auto" :rules="rules" status-icon>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" placeholder="请输入密码" show-password clearable> </el-input>
                </el-form-item>
                <el-form-item>
                    <input type="button" value="Login" title="登录" @click="submitForm">
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
  
<script>
export default {
    data() {
        return {
            form: {
                username: '', password: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '用户名请控制在3-20个字符', trigger: 'blur' },
                    { validator: this.AntiSqlValid, trigger: 'blur' }],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: this.AntiSqlValid, trigger: 'blur' }]
            }
        }
    },
    methods: {
        //过滤特殊字符
        AntiSqlValid(rule, value, callback) {
            const re = /\,|\'|\;|\$/g;
            if (re.test(value)) { callback('请输入合法数据') }
            else { callback() }
        },
        //登录
        submitForm() {
            //表单数据验证
            this.$refs.form.validate(async (valid) => {
                //valid为验证结果，true符合规则,false不符合规则 
                if (valid) {
                    //将用户名和密码发到服务端
                    const result = await this.$http.post('/admCkLogin', this.form)
                    // console.log(result)
                    if (result.data.status === 'success') {
                        //弹出登录成功提示
                        this.$message.success('登录成功')
                        //将用户信息存入缓存
                        localStorage.setItem('admin', JSON.stringify(result.data.info))
                        //跳转至管理后台主页
                        this.$router.push('/home?521')
                    } else { this.$message.error('登录失败') }
                } else { this.$message.error('登录失败') }
            })
        }
    }
}

</script>
  
<style lang="scss" scoped>
.container {
    background-image: url('../../public/images/大雁纷飞唯美风.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;



    input[type=button] {
        height: 40px;
        width: 100%;
        cursor: pointer;
        border-radius: 2px;
        border: none;
        background: linear-gradient(to right, rgba(0, 168, 238, 0.5), rgba(0, 168, 238, 0.8));
    }

    input[type=button]:hover {
        animation: colorChange 2s infinite;
    }

    /* 定义帧动画 */
    @keyframes colorChange {
        20% {
            background-color: red;
        }

        50% {
            background-color: black;
        }

        75% {
            background-color: purple;
        }

        100% {
            background-color: rgba(0, 255, 255, 0.5);
        }
    }



    .body {
        background-color: rgba(0, 0, 0, .5);
        text-align: center;
        padding: 40px 70px;
        border-radius: 20px;
        color: white;



        h1 {
            margin-left: 50px;
            font-family: 'Lobster', 'Raleway', serif, sans-serif;
        }
    }

}
</style>
<style>
.login .el-form-item__label {
    color: white;
}
</style>